<template>
    <div class="coupon-wrap">
        <p class="clearfix"><el-button class="r pan-btn green-btn sm-btn" size="small" icon="el-icon-refresh"
                      @click="refresh()"></el-button></p>

        <el-form id="form-data" :model="couponForm" ref="couponForm" :rules="couponRule" :label-width="labelWidth" class="demo-ruleForm">
            <el-form-item label="奖品编号" prop="activityPrizeId">
                <el-select v-model="activityId" placeholder="请选择活动列表" @change="getPrizeId">
                    <el-option v-for="item in activityArr" :label="item.name" :value="item.id" :key="item.id"></el-option>
                </el-select>
                <el-select v-if="activityId != ''" v-model="couponForm.activityPrizeId" placeholder="请选择编号">
                    <el-option v-for="item in prizeArr" :label="item.prizeName" :value="item.id" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="券码类型" prop="couponType">
                <el-select v-model="couponForm.couponType" >
                    <el-option label="卡密" value="KEY"></el-option>
                    <el-option label="卡号卡密" value="CODE_AND_KEY"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择文件">
                <input type="file" name="couponCodeExcelFile" />
                <div class="el-form-item__error">文件必传</div>
            </el-form-item>
            <el-form-item label="备注">
                <quill-editor style="width: 600px;" ref="myTextEditor" @change="remarksChange($event)"  :options="editorOption"></quill-editor>
            </el-form-item>
            <el-form-item>
                <el-button class="pan-btn green-btn" @click="submitHandle">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import request from '@/utils/request';
    import { quillEditor } from 'vue-quill-editor'
    export default {
        name: 'createCoupon',
        data () {
            return {
                couponForm: {
                    activityPrizeId: '',   //// 所属奖品编号
                    couponType: 'KEY',       /////类型
                    remarks: ''           ////////备注
                },
                editorOption: {
                    placeholder: 'Hello World'
                },
                activityId: '',
                activityArr: [],
                prizeArr: [],
                labelWidth: '150px',
                couponRule: {
                    activityPrizeId: [
                        {required: true, message: '请选择券码编号', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.getActivityArr();
            })
        },
        components: {
            quillEditor
        },
        methods: {
            remarksChange (event) {
                  this.couponForm.remarks = event.html;
            },
            getActivityArr () {
                const _this = this;
                request.get('/activityConsole/activity/info/findAll', {
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    }
                }).then( res => {
                    console.log(res);
                    _this.activityArr = res;
                }).catch(err => {
                    console.log(err);
                })
            },
            getPrizeId () {
                console.log(this.activityId);
                const _this = this;
                request.get('/activityConsole/activity/activityInfoId/'+ _this.activityId +'/prize/coupon-code-list', {
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    }
                }).then( res => {
                    console.log(res);
                    _this.prizeArr = res.data;
                }).catch(err => {
                    console.log(err);
                })
            },
            refresh() {
                this.$router.go(0)
            },
            submitHandle () {
                const _this = this;
                console.log(_this.couponForm);
                let formData = new FormData(document.querySelector("#form-data"));
                formData.append('activityPrizeId', _this.couponForm.activityPrizeId);
                formData.append('couponType', _this.couponForm.couponType);
                formData.append('remarks', _this.couponForm.remarks);

                this.$refs.couponForm.validate(valid => {
                    if (valid) {
                        request({
                            url: '/activityConsole/activity/info/prize/couponCode/batch-import-excel-file',
                            method: 'post',
                            data: formData
                        }).then(res => {
                            console.log(res);
                            let state = 'success';
                            if (res.status != 200) {
                                state = 'error'
                            }
                            _this.$message({
                                type: state,
                                message: res.description
                            });
                        }).catch(err => {
                            console.log(err);
                            _this.$message({
                                type: 'error',
                                message: err.description
                            });
                        });
                    }
                });
            }
        }
    }
</script>
<style scoped>
    .demo-ruleForm {
        width: 570px;
    }
</style>
